<template>
  <div class="flex-col flex-center">
    <el-upload action="/api/order/afterSale/uploadFiles" name="files" :show-file-list="true" list-type="picture-card"
      multiple :limit="10" :on-exceed="handleExceed" accept=".png,.jpg,.jpeg,.gif,.bmp" 
      :before-upload="beforeUpload"
      :on-success="handleUploadSuccess" 
      :on-error="handleUploadError" 
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove">
      <el-icon><plus /></el-icon>
    </el-upload>
    <el-dialog v-model="dialogVisible">
      <img width="200" height="200" :src="dialogImageUrl">
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Plus } from '@element-plus/icons-vue'
import type { UploadFile } from 'element-plus/es/components/upload/src/upload.type'
import { defineComponent, onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'

export default defineComponent({
  components: {
    Plus
  },
  props: {
    imageList: {
      type: Array
    }
  },
  setup(props) {
    
    const dialogImageUrl = ref('')
    const dialogVisible = ref(false)
    
    onMounted(() => {

    })
    
    const handleExceed = () => {
      // 文件超出个数限制时的钩子
      ElMessage({
        message: '最多只能上传10张图片',
        type: 'warning',
      })
    }
    
    const beforeUpload = (file) => {
      // 上传文件之前的钩子
      var that = this
      const isJPG = file.type === 'image/jpeg'
      const isGIF = file.type === 'image/gif'
      const isPNG = file.type === 'image/png'
      const isBMP = file.type === 'image/bmp'
      if (!isJPG && !isGIF && !isPNG && !isBMP) {
        ElMessage({
          message: '上传图片必须是JPG/GIF/PNG/BMP 格式!',
          type: 'warning',
        })
      }
      // 是否要返回图片的宽高
      // var imgOjb = URL.createObjectURL(file)
      // var img = new Image()
      // img.src = imgOjb
      // img.onload = function() {
      //   that.imageList.forEach(item => {
      //     if (item.uid === file.uid) {
      //       item.fileWidth = img.width
      //       item.fileHeight = img.height
      //     }
      //   })
      // }
      return true
    }
    
    const handleUploadSuccess = (res, file, fileList) => {
      if (res.code === 101) {
        props.imageList.push({
          imageUrl: res.data[0],
          uid: file.uid
        })
      } else {
        ElMessage({
          message: '网络异常，请稍后再试(504)',
          type: 'warning',
        })
      }
    }
    
    const handleUploadError = (res, file) => {
      ElMessage({
        message: '网络异常，请稍后再试(504)',
        type: 'warning',
      })
    }
    
    const handlePictureCardPreview = (file: UploadFile) => {
      dialogImageUrl.value = file.url!
      dialogVisible.value = true
    }
    
    const handleRemove = (file: UploadFile, fileList: UploadFile[]) => {
      // 获取elemetUI upload中上传的数组 同步删除
      const index = props.imageList.findIndex(item => {
        return item.uid === file.uid
      })
      props.imageList.splice(index, 1)
    }
    
    return {
      handleExceed,
      beforeUpload,
      handleUploadSuccess,
      handleUploadError,
      dialogImageUrl,
      dialogVisible,
      handlePictureCardPreview,
      handleRemove
    }
  }
})
</script>

<style lang="scss" scoped>

</style>
